<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .colorbox {
            list-style: none;
            background-color: white;
            box-shadow: 2px 2px 55px rgb(158, 157, 157);   
            width: 210px;         
            padding: 10px;
        }

        .colorbox li {
            display: inline-block;            
            height: 20px;
            width: 20px;
            margin: 5px;
            border-radius: 50%;
        }
    </style>
</head>

<body onload="onload_x()">
    <ul id="id_color" class="colorbox">

    </ul>
    <script>
        function onload_x() {
            var color_list = ["#ff9900",
                "#2baadf",
                "#BD2D30",
                "#0273dd",
                "#5cb85c",
                "#a479e2",
                "#d94235",
                "#e9b330",
                "#fe7300",
                "#3385ff",
                "#2d78f4",
                "#FF555D",
                "#2CC427",
                "#0F96FF",
                "#FF0102",
                "#BDB5B1",
                "#19A97B",
                "#e5e5e5",
                "#337AB7",
                "#1171B7",
                "#FF6684",
                "#FF9A00",
                "#55AF32",
                "#2681FF",
                "#999999",
                "#105E96",
                "#7B4F9D",
                "#117DF2",
                "#5FBA7D",
                "#563D7C",
                "#7952B3",
                "#8755D2",
                "#0099D8",
                "#007BFF",
                "#5BC0DE",
                "#CC52FD",
                "#155724",
                "#D4EDDA",
                "#28A745",
                "#17A2B8",
                "#FFC107",
                "#DC3545"];
            var colorbox = document.getElementById("id_color");
            for (var i in color_list) {
                var color = color_list[i];
                var el = document.createElement("li");
                el.style.backgroundColor = color;
                colorbox.appendChild(el);
            }
        }

    </script>
</body>

</html>